<template>
    <div class="container">
        <div class="form">
           <h1>中途酒店客房管理登录</h1>
        <el-form rel="form" :model="admin"  :rules="rules" label-width="60px" >
            <el-form-item prop="username">
                <div style="color:#CDD0D6;">用户名：</div>
                <el-input type="text" v-model="admin.username" size="large" style="width: 400px;" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <div style="margin-right: 14px; color:#CDD0D6;" >密码：</div>
                <el-input type="password" v-model="admin.password" size="large" style="width: 400px;" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
                <div style="margin-right: 14px; color:#CDD0D6;" >验证码：</div>
                <el-input type="text" v-model="admin.captcha" size="large" style="width: 400px;" placeholder="请输入验证码"></el-input>
            </el-form-item>
            <el-image style="width: 120px; height: 38px; margin-top: 10px; margin-left: 60px;" :src="captchaImageBase64Data" @click="getCaptcha"  />
            <el-form-item >
                <el-button type="primary" @click="login" >登录</el-button>
            </el-form-item>
        </el-form> 
        </div>
    </div>
</template>
<script setup>
import adminApi from '@/api/admin';
import { ref,reactive } from 'vue';
import { ElMessage } from 'element-plus';
import router from '@/router';
import { useTokenStore } from '@/stores/token';

const tokenStore = useTokenStore();
const admin = ref({
    username: '',
    password: '',
    captchaId:'',
    captcha:''
})
const captchaImageBase64Data = ref('');

//整个表单的校验规则
const rules = {
  username: [
    // 非空校验，
    //required表示是否必须输入
    // message表示不满足规则显示的信息
    //trigger：表示显示时机，blur表示是失去焦点，值换成change表示实时
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  captcha:[
  { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
}

function login() {
    adminApi.login(admin.value)
        .then(resp => {
            if (resp.code == 10000) {
                ElMessage.success({
                    message: resp.msg,
                    duration: 1000,
                    onClose: () => {
                        tokenStore.update(resp.data);
                        //跳转到首页
                        router.push('/index');
                    }
                })
            } else {
                ElMessage.error(resp.msg);
            }
        });
}

function getCaptcha(){
    adminApi.captcha()
        .then(resp => {
            captchaImageBase64Data.value=resp.data.captchaImageBase64Data;
            admin.value.captchaId=resp.data.captchaId;
        })
}
getCaptcha();
</script>
<style scoped>
.container {
    width: 100%;
    height: 100%;
    background-image: url(../assets/image/tp1.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.form{
    background-color: rgba(0,0,0,0.5);
   width: 500px;
   height: 500px;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
}
</style>